<template>
<el-table
    :data="showPage"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="username"
      label="用户名"
      sortable
      width="380">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="380">
    </el-table-column>
    <el-table-column
      prop="phonenumber"
      label="联系方式"
      width="380">
    </el-table-column>
    <el-table-column
      prop="role"
      label="锁定"
      :formatter="formatter">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small" v-if="scope.row.role === 'USER'" :id="scope.row.username">锁定</el-button>
        <el-button @click="handleClick(scope.row)" type="text" size="small" v-else :id="scope.row.username">取消锁定</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import axios from 'axios'
export default {
  name: 'UserManage',
  data () {
    return {
      tableData: [],
      currentPage: 1,
      totalItem: 0,
      pageSize: 2,
      showPage: [],
      allPages: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    formatter (row, column) {
      return row.address
    },
    handleClick (row) {
      let formData = new FormData()
      formData.append('username', row.username)
      let role = row.role
      if (role === 'USER') {
        axios({
          withCredentials: true,
          maxRedirects: 0,
          method: 'post',
          url: '/admin/lockUser',
          timeout: 4000,
          data: formData
        }).then((res) => {
          console.log(res)
          if (res.data === 'ok') {
            let operation = document.getElementById(row.username)
            operation.innerHTML = '取消锁定'
            row.role = 'LOCK'
          }
        }, ErrorEvent => {
          this.$message('操作失败')
        })
      } else {
        axios({
          withCredentials: true,
          maxRedirects: 0,
          method: 'post',
          url: '/admin/unLockUser',
          timeout: 4000,
          data: formData
        }).then((res) => {
          console.log(res)
          if (res.data === 'ok') {
            let operation = document.getElementById(row.username)
            operation.innerHTML = '锁定'
            row.role = 'USER'
          }
        }, ErrorEvent => {
          this.$message('操作失败')
        })
      }
    },
    getUserList () {
      axios({
        withCredentials: true,
        maxRedirects: 0,
        method: 'get',
        url: '/admin/getUserList',
        timeout: 4000
      }).then((res) => {
        console.log(res)
        this.unnormalnum = res.data.length
        this.tableData = res.data
        this.pageslice()
      }, ErrorEvent => {
        this.$message('请求数据失败')
      })
    },
    handlePageChange (val) {
      this.currentPage = val
      this.showPage = this.allPages[this.currentPage - 1]
    },
    pageslice () {
      this.totalItem = this.tableData.length
      let wholeTable = this.tableData
      this.allPages = []
      for (let i = 0; i < wholeTable.length; i += this.pageSize) {
        this.allPages.push(wholeTable.slice(i, i + this.pageSize))
      }
      if (this.allPages.length > 0) {
        this.showPage = this.allPages[0]
      } else {
        this.showPage = []
      }
    }
  }
}
</script>
